<script lang="ts" setup>
const emit = defineEmits(['update:modelValue', 'change'])
  const props = defineProps({
    dataSource: {
      type: Array,
      default: function() {
        return []
      }
    },
    modelValue: {
      type: String,
      default: ''
    }
  })

   const changeHandler = (val:any) => {
     emit('update:modelValue', val.value)
     emit('change', val.value)
   }
</script>

<template>
  <div class="nav-box">
    <div v-for="item of dataSource"
         :class="['nav-btn',modelValue===item.value?'nav-btn-sel':'']"
         @click="changeHandler(item)">
      {{ item.label }}
    </div>
  </div>
</template>

<style scoped lang="scss">

.nav-box {
  @include hor-group();
  flex: none;

  .nav-btn{
    flex:none;
    padding: 2px 5px;
    box-sizing: border-box;
    color:var(--w-color-light);
    font-size:12px;
    margin-right: 1px;
    cursor: pointer;
    &:hover{
      background: var(--w-color-light-2);
    }
  }
  .nav-btn:last-child{
    margin-right: 0;
  }
  .nav-btn-sel{
    background: var(--w-color-light);
    color:#fff;

    &:hover{
      background: var(--w-color-light);
    }
  }

}

</style>
